<template>
	<!-- 评价详情 -->
	<view class="container" :class="{'bottom-button': showButton}">
		<headTitle title="评价详情" :comment="true" @share="share"></headTitle>
		<comment :comment="commentItem" @openPhoto="openPhoto" type="des" @like="like" :op="op" @commentOp='commentOp'></comment>
		<!-- 预览图片 -->
		<previewImg v-if="openImg" @close="close" :cureent="currentImg" :arr="arrImg"></previewImg>
		<view class="comment-all">
			<view class="title flex-center bgfff">
				<image src="/static/image/allcomment.png" mode=""></image>
				<text class="font32 color333 fontb">全部评论({{commentItem.commentNumber || 0}})</text>
			</view>
			<view class="content bgfff" v-for="(item, index) in commentList" :key="index">
				<view class="info flex-center">
					<image :src="item.pic" mode="aspectFill"></image>
					<view class="flex-column-between">
						<view class="font32 color333">{{item.memberName}}</view>
						<view class="font26 color888">{{item.createTime}}</view>
					</view>
				</view>
				<view class="txt font30 color333">
					{{item.content}}
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
		<view class="comment-layer" v-show="show" @tap="show =false"></view>
		<view class="comment-send bgfff flex-center" v-if="showButton">
			<input type="text" class="font26" :value="content" placeholder="输入评论内容…" maxlength="200"
				@focus="foucu" @blur='show =false' @input="write"/>
			<button class="font32 colorfff" @tap="send">发送</button>
		</view>
		<!-- 分享 -->
		<share ref="share" :contentHeight="400" :shareData="shareData"></share>
	</view>
</template>

<script>
import Api from '@/common/api'
import headTitle from '@/components/head-title'
import comment from '@/components/comment'
import share from '@/components/share'
import previewImg from '@/components/preview-img'
import uniLoadMore from '@/components/uni-load-more/uni-load-more'
export default {
	data() {
		return {
			idx: -1, // 我的评论哪条已评论进去评论详情
			op: false, // 操作默认false是举报
			openImg: false, // 图片预览
			arrImg: [], // 图片数组
			currentImg: 0, // 当前选中图片
			commentItem: {}, // 数据
			commentList: [], // 子评论数据
			id: 0, // 评论id
			pageNum: 1,
			loadingType: 'more', //加载更多状态
			show: false, // 遮罩层
			height: 0,
			scoll: 0, // 滑动高度
			content: '', // 评价内容
			toggleData: '', // 切换页面需要重新请求数据(记录token)
			shareData: {}, // 分享的数据
			showButton: true, // 显示底部按钮
		}
	},
	onShow() {
		if(this.toggleData !== uni.getStorageSync('token')) {
			this.toggleData = uni.getStorageSync('token')
			if(this.id) { 
				this.getComment()
			}
		}
	},
	onLoad(opt) {
		// 我的评论哪条已评论进去评论详情
		if(opt.index) {
			this.idx = isNaN(+opt.index) ? -1 : +opt.index
		}
		// 可设置评论的操作
		if(opt.op) {
			this.op = true
		}
		this.toggleData = uni.getStorageSync('token')
		this.id = opt.id
		if(this.id) {
			this.getComment()
			this.getData('refresh')
		}
		// 获取窗口可视高度
		this.height = uni.getSystemInfoSync().windowHeight
		// 处理键盘弹出和收起
		uni.onWindowResize((res) => {
			if(this.height === res.size.windowHeight) {
				this.show = false
			}
		})
	},
	onPageScroll(e) {
		this.scoll = e.scrollTop
	},
	//加载更多
	onReachBottom() {
		this.pageNum += 1
		this.getData()
	},
	methods: {
		// 评论操作（除了举报外）
		commentOp(type, flag) {
			this.commentItem[type] = flag
			if(this.idx !== -1) {
				this.$api.prePage().commentList[this.idx][type] = flag
			}
			if(type === 'commentStatus') {
				// 不显示底部按钮
				this.showButton = this.commentItem.commentStatus ? true : false
			}
		},
		//分享
		share() {
			this.$refs.share.toggleMask()
		},
		// 获取评价详情
		async getComment() {
			this.commentItem = await Api.apiCall('get', Api.goods.getGoodComment, { id: this.id}) || {}
			if(this.commentItem.commentStatus === 0) {
				// 不显示底部按钮
				this.showButton = false
			}
			if(this.commentItem) {
				// 设置分享的数据
				this.shareData = {
					shareTitle: this.commentItem.goodsName,
					shareUrl: this.$host + '/pages/product/product?id=' + this.commentItem.goodsId,
					shareContent: '我在物连家美发现了一个不错的商品，快来看看吧，说不定你也喜欢哦~',
					shareIconUrl: this.commentItem.shareImg || '',
					shareImageUrl: '',
				}
			}
		},
		// 获取子评论的数据
		async getData(type = 'add') {
			// 没有更多直接返回
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return
				}
				this.loadingType = 'loading'
			} else {
				this.loadingType = 'more'
			}
			
			let list = await Api.apiCall('get', Api.goods.getGoodCommentChildren, { 
				id: this.id,
				pageIndex: this.pageNum,
				pageSize: 10,
			})
			if(!list) return  
			let commentList = list.recordList
			if (type === 'refresh') {
				this.commentList = []
			}
			this.commentList = this.commentList.concat(commentList)
			
			// 判断是否有下一页数据
			this.loadingType = list.hasMore == 0 ? 'nomore' : 'more'
			if (type === 'refresh') {
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1000)
			}
		},
		// 点赞
		like(flag) {
			let num = this.commentItem.praise
			this.commentItem.praise = flag ? num + 1 : num - 1
			this.commentItem.isPraise = flag
			// 修改上一个页面的数据
			this.$api.prePage().commentList.map((item, index) => {
				if(item.id == this.id) {
					item.isPraise = flag
					item.praise = flag ? item.praise + 1 : item.praise - 1
				}
			})
		},
		// 预览图片
		openPhoto(item, index) {
			this.currentImg = index
			this.commentItem.images.map(item => {
				this.arrImg.push({
					img: item,
					content: {
						name: this.commentItem.memberName,
						attr: this.commentItem.attr,
						text: this.commentItem.consultContent,
					}
				})
			})
			this.openImg = true
		},
		// 关闭轮播图
		close(flag) {
			this.openImg = flag 
		},
		// 得到焦点
		foucu() {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
				return
			}
			this.show = true
		},
		// 发送评论
		async send() {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
				return
			}
			if(this.content === '') {
				this.$api.msg('评论不能为空', 500)
			}else {
				let res = await Api.apiCall('post', Api.goods.posGoodComment, {
					id: this.commentItem.id,
					content: this.content,
				}, true)
				this.content = ''
				if(res) {
					this.commentList.unshift(res)
					this.commentItem.commentNumber += 1
					// 修改上一个页面的数据
					this.$api.prePage().commentList.map(item => {
						if(item.id == this.id) {
							item.commentNumber += 1
						}
					})
				}
			}
		},
		write(event) {
			this.content = event.detail.value.trim()
		}
	},
	components: {
		headTitle,
		comment,
		previewImg,
		uniLoadMore,
		share,
	}
}
</script>

<style lang="scss">
page {
	background-color: #F5F5F5;
}
.container {
	padding-top: 104rpx;
	&.bottom-button {
		padding-bottom: 98rpx;
	}
}
.comment-all {
	width: 100%;
	margin-top: 16rpx;
	.title {
		letter-spacing: 1rpx;
		padding: 30rpx;
		height: 97rpx;
		border-bottom: 1rpx solid #DDD;
		image {
			width: 36rpx;
			height: 34rpx;
			margin-right: 20rpx;
		}
	}
	.content {
		padding: 30rpx;
		border-bottom: 1rpx solid #DDD;
		.info {
			height: 86rpx;
			margin-bottom: 30rpx;
			image {
				width: 86rpx;
				height: 86rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			&>view {
				height: 86rpx;
			}
		}
		.txt {
			letter-spacing: 1rpx;
			line-height: 46rpx;
		}
	}
}
.comment-layer {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.2);
	z-index: 49;
}
.comment-send {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 50;
	width: 100%;
	height: 98rpx;
	border-top: 1rpx solid #DDD;
	padding-left: 30rpx;
	input {
		width: 500rpx;
		height: 60rpx;
		background-color: #F6F6F6;
		padding: 0 30rpx;
		border-radius: 30rpx;
	}
	button {
		width: 140rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		border-radius: 28rpx;
		background-color: #C84739;
		letter-spacing: 1rpx;
	}
}
</style>
